<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>站站融通</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            background: #f5f5f5;
            min-height: 100vh;
        }

        /* 顶部导航栏 */
        .top-header {
            background: linear-gradient(to right, #EC3432 0%, #FA7E3A 100%);
            padding: 15px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
            min-height: 56px;
        }

        .logo {
            color: white;
            font-size: 20px;
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .top-search {
            flex: 1;
            max-width: 220px;
            margin: 0 20px;
        }

        .top-search-box {
            background: rgba(255,255,255,0.95);
            border-radius: 22px;
            padding: 8px 16px;
            display: flex;
            align-items: center;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .top-search-icon {
            color: #999;
            font-size: 14px;
            margin-right: 5px;
        }

        .top-search-input {
            border: none;
            outline: none;
            background: transparent;
            font-size: 13px;
            width: 100%;
        }

        .top-search-input::placeholder {
            color: #999;
        }

        .top-right {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .login-btn {
            background: none;
            border: none;
            color: white;
            font-size: 14px;
            cursor: pointer;
            font-weight: 500;
        }

        .user-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(255,255,255,0.25);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 22px;
            border: 2px solid rgba(255,255,255,0.3);
        }

        /* 标签栏 */
        .tab-bar {
            background: #FFF2E3;
            display: flex;
            justify-content: space-around;
            padding: 7px 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.06);
        }

        .tab-item {
            color: #666;
            font-size: 15px;
            text-decoration: none;
            position: relative;
            padding-bottom: 6px;
            font-weight: 500;
        }

        .tab-item.active {
            color: #c62828;
            font-weight: bold;
        }

        .tab-item.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 24px;
            height: 3px;
            background: linear-gradient(to right, #c62828 0%, #e53935 100%);
            border-radius: 2px;
        }

        /* 横幅区域 */
        .banner-area {
            position: relative;
            overflow: hidden;
            margin: 0 20px 15px 20px;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }

        .banner-pattern {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: transparent;
            z-index: 0;
        }

        .banner-content {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
        }

        .banner-image-container {
            position: relative;
            width: 100%;
            height: 205px;
            overflow: hidden;
        }

        .banner-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }

        .banner-image.active {
            opacity: 1;
        }

        .banner-dots {
            position: absolute;
            bottom: 12px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 8px;
            z-index: 2;
        }

        .banner-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255,255,255,0.6);
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }

        .banner-dot.active {
            background: white;
            width: 24px;
            border-radius: 4px;
        }

        /* 通知播报区域 */
        .notice-broadcast {
            background: #FFF1E0;
            margin: 0 20px 12px 20px;
            padding: 5px 15px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            gap: 12px;
            box-shadow: 0 2px 6px rgba(255,193,7,0.25);
            overflow: hidden;
        }

        .broadcast-icon {
            color: #f57c00;
            font-size: 20px;
            flex-shrink: 0;
        }

        .broadcast-content {
            flex: 1;
            overflow: hidden;
            position: relative;
            height: 16px;
        }

        .broadcast-text {
            color: #e65100;
            font-size: 14px;
            white-space: nowrap;
            position: absolute;
            animation: scroll-left 20s linear infinite;
        }

        @keyframes scroll-left {
            0% {
                transform: translateX(100%);
            }
            100% {
                transform: translateX(-100%);
            }
        }

        .broadcast-text:hover {
            animation-play-state: paused;
        }

        /* 白色内容区域 */
        .white-content {
            background: #f5f5f5;
            padding-top: 10px;
        }
        
        /* 功能网格 */
        .function-grid {
            background: white;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px 15px;
            padding: 20px 15px;
            margin: 0 20px 15px 20px;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        }

        .function-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;
            color: #333;
        }

        .function-icon {
            width: 52px;
            height: 52px;
            border-radius: 13px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 26px;
            margin-bottom: 8px;
            background: linear-gradient(to right, #d32f2f 0%, #e53935 50%, #ef5350 100%);
            box-shadow: 0 3px 10px rgba(211,47,47,0.3);
        }

        .function-icon.green {
            background: linear-gradient(to right, #388e3c 0%, #4caf50 50%, #66bb6a 100%);
            box-shadow: 0 3px 10px rgba(56,142,60,0.3);
        }

        .function-icon.blue {
            background: linear-gradient(to right, #1976d2 0%, #2196f3 50%, #42a5f5 100%);
            box-shadow: 0 3px 10px rgba(25,118,210,0.3);
        }

        .function-icon.orange {
            background: linear-gradient(to right, #f57c00 0%, #ff9800 50%, #ffa726 100%);
            box-shadow: 0 3px 10px rgba(245,124,0,0.3);
        }

        .function-icon.purple {
            background: linear-gradient(to right, #7b1fa2 0%, #9c27b0 50%, #ba68c8 100%);
            box-shadow: 0 3px 10px rgba(123,31,162,0.3);
        }

        .function-icon.teal {
            background: linear-gradient(to right, #00796b 0%, #009688 50%, #26a69a 100%);
            box-shadow: 0 3px 10px rgba(0,121,107,0.3);
        }

        .function-icon.yellow {
            background: linear-gradient(to right, #f9a825 0%, #ffc107 50%, #ffd54f 100%);
            box-shadow: 0 3px 10px rgba(249,168,37,0.3);
        }
        
        .function-name {
            font-size: 13px;
            color: #333;
            font-weight: 500;
            text-align: center;
        }

        /* 志愿服务区域 */
        .service-section {
            background: white;
            padding: 15px;
            margin: 0 20px 15px 20px;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        }

        .service-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 15px;
        }

        .service-icon {
            font-size: 20px;
        }

        .service-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
        }

        .service-cards {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }

        .service-card {
            position: relative;
            height: 100px;
            border-radius: 8px;
            overflow: hidden;
            text-decoration: none;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .service-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 100%);
            z-index: 1;
        }

        .service-card-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0;
        }

        .service-card-title {
            position: relative;
            z-index: 2;
            font-size: 15px;
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
        }

        /* 大图展示区域 */
        .big-image-section {
            margin: 0 20px 15px 20px;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
            height: 80px;
        }

        .big-image-container {
            position: relative;
            width: 100%;
            height: 80px;
            overflow: hidden;
            display: block;
        }

        .big-image {
            width: 100%;
            height: 80px;
            object-fit: cover;
            display: block;
        }

        /* 活动招募区域 */
        .activity-recruit-section {
            background: white;
            padding: 15px;
            margin: 0 20px 15px 20px;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        }

        .recruit-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 15px;
        }

        .recruit-title {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .recruit-icon {
            font-size: 20px;
        }

        .recruit-title-text {
            font-size: 16px;
            font-weight: bold;
            color: #333;
        }

        .recruit-more {
            font-size: 14px;
            color: #999;
            text-decoration: none;
        }

        .recruit-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 15px 10px;
        }

        .recruit-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;
            color: #333;
        }

        .recruit-item-icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            margin-bottom: 8px;
            background: #f5f5f5;
        }

        .recruit-item-icon.green {
            background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
        }

        .recruit-item-icon.yellow {
            background: linear-gradient(135deg, #fff9c4 0%, #fff59d 100%);
        }

        .recruit-item-icon.orange {
            background: linear-gradient(135deg, #ffe0b2 0%, #ffcc80 100%);
        }

        .recruit-item-icon.red {
            background: linear-gradient(135deg, #ffcdd2 0%, #ef9a9a 100%);
        }

        .recruit-item-icon.blue {
            background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
        }

        .recruit-item-name {
            font-size: 12px;
            color: #333;
            text-align: center;
        }

        /* 志愿大数据区域 */
        .data-stats-section {
            background: white;
            padding: 15px;
            margin: 0 20px 15px 20px;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        }

        .stats-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 15px;
        }

        .stats-title {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .stats-icon {
            font-size: 20px;
        }

        .stats-title-text {
            font-size: 16px;
            font-weight: bold;
            color: #333;
        }

        .stats-update-time {
            font-size: 12px;
            color: #999;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px 10px;
        }

        .stats-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .stats-number {
            font-size: 24px;
            font-weight: bold;
            color: #e53935;
            margin-bottom: 5px;
        }

        .stats-label {
            font-size: 12px;
            color: #666;
        }

        /* 志愿精神横幅 */
        .volunteer-spirit-section {
            margin: 0 20px 15px 20px;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        }

        .spirit-banner {
            background: linear-gradient(to right, #ff6b35 0%, #ff8e53 50%, #ff9a66 100%);
            padding: 30px 20px;
            position: relative;
            overflow: hidden;
        }

        .spirit-banner::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background:
                repeating-linear-gradient(45deg,
                    transparent,
                    transparent 10px,
                    rgba(255,255,255,0.05) 10px,
                    rgba(255,255,255,0.05) 20px);
        }

        .spirit-title {
            font-size: 22px;
            font-weight: bold;
            color: white;
            text-align: center;
            margin-bottom: 20px;
            position: relative;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
        }

        .spirit-values {
            display: flex;
            justify-content: space-around;
            align-items: center;
            position: relative;
        }

        .spirit-value {
            color: white;
            font-size: 18px;
            font-weight: bold;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
        }

        /* 公告栏 */
        .notice-bar {
            background: white;
            margin: 0 0 15px 0;
            padding: 12px 15px;
            display: flex;
            align-items: center;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }
        
        .notice-icon {
            margin-right: 10px;
        }
        
        .notice-text {
            flex: 1;
            font-size: 14px;
            color: #666;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .notice-more {
            color: #999;
            font-size: 12px;
        }
        
        /* 活动卡片 */
        .activity-cards {
            padding: 0 20px;
        }
        
        .card-row {
            display: flex;
            gap: 15px;
            margin-bottom: 15px;
        }
        
        .activity-card {
            flex: 1;
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            text-decoration: none;
            color: inherit;
            position: relative;
            overflow: hidden;
            min-height: 100px;
        }
        
        /* 为每个卡片添加独特的背景装饰 */
        .activity-card::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -30%;
            width: 150%;
            height: 150%;
            opacity: 0.1;
            transform: rotate(45deg);
        }
        
        .activity-card.blue {
            background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
        }
        
        .activity-card.blue::before {
            background: radial-gradient(circle, #2196f3 0%, transparent 70%);
        }
        
        .activity-card.orange {
            background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
        }
        
        .activity-card.orange::before {
            background: radial-gradient(circle, #ff9800 0%, transparent 70%);
        }
        
        .activity-card.yellow {
            background: linear-gradient(135deg, #fffde7 0%, #fff9c4 100%);
        }
        
        .activity-card.yellow::before {
            background: radial-gradient(circle, #ffc107 0%, transparent 70%);
        }
        
        /* 粉色卡片样式 */
        .activity-card.pink {
            background: linear-gradient(135deg, #fce4ec 0%, #f8bbd0 100%);
        }
        
        .activity-card.pink::before {
            background: radial-gradient(circle, #e91e63 0%, transparent 70%);
        }
        
        .card-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 8px;
            color: #333;
            position: relative;
            z-index: 2;
        }
        
        .card-subtitle {
            font-size: 12px;
            color: #666;
            margin-bottom: 10px;
            position: relative;
            z-index: 2;
        }
        
        .card-action {
            font-size: 12px;
            color: #4a9eff;
            position: relative;
            z-index: 2;
        }
        
        .card-icon {
            position: absolute;
            right: 15px;
            bottom: 15px;
            width: 40px;
            height: 40px;
            font-size: 30px;
            opacity: 0.8;
            z-index: 1;
        }
        
        /* 为师资库卡片添加特殊装饰 */
        .activity-card.blue .card-icon::after {
            content: '';
            position: absolute;
            width: 60px;
            height: 60px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><circle cx="30" cy="15" r="8" fill="%232196f3" opacity="0.3"/><path d="M20,25 Q30,20 40,25 L40,45 Q30,40 20,45 Z" fill="%232196f3" opacity="0.2"/></svg>') no-repeat;
            background-size: contain;
            top: -10px;
            left: -10px;
        }
        
        /* 为团队入驻卡片添加旗帜装饰 */
        .activity-card.orange .card-icon::after {
            content: '';
            position: absolute;
            width: 50px;
            height: 50px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="M10,10 L10,40 M10,10 L35,15 L30,20 L35,25 L10,30" fill="%23ff9800" opacity="0.3"/></svg>') no-repeat;
            background-size: contain;
            top: -5px;
            left: -5px;
        }
        
        /* 推荐活动标题 */
        .section-title {
            padding: 0 20px;
            margin: 20px 20px 15px 20px;
            font-size: 16px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .section-more {
            font-size: 12px;
            color: #999;
            font-weight: normal;
        }
        
        /* 活动列表项 */
        .activity-list-item {
            background: white;
            margin: 0 20px 15px 20px;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
            position: relative;
        }
        
        /* 活动图片容器 */
        .activity-image-container {
            width: 100%;
            height: 180px;
            overflow: hidden;
            position: relative;
        }
        
        /* 活动图片 */
        .activity-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }
        
        .activity-image:hover {
            transform: scale(1.05);
        }
        
        .activity-tag {
            position: absolute;
            top: 10px;
            right: -20px;
            background: linear-gradient(to right, #c62828 0%, #e53935 100%);
            color: white;
            padding: 5px 25px;
            font-size: 12px;
            transform: rotate(45deg);
            z-index: 1;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        .activity-header {
            padding: 15px;
            background: #ffebee;
        }
        
        .activity-main-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 8px;
        }
        
        .activity-details {
            padding: 15px;
        }
        
        .activity-org {
            font-size: 14px;
            color: #666;
            margin-bottom: 8px;
        }
        
        .activity-rating {
            color: #ffa726;
            font-size: 14px;
            margin-bottom: 8px;
        }
        
        .activity-info {
            font-size: 12px;
            color: #999;
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        
        .activity-info span {
            display: flex;
            align-items: center;
        }
        
        .activity-distance {
            color: #ff6b6b;
        }
        
        .signup-btn {
            background: linear-gradient(to right, #d32f2f 0%, #e53935 50%, #ef5350 100%);
            color: white;
            border: none;
            padding: 8px 20px;
            border-radius: 20px;
            font-size: 12px;
            margin-left: auto;
            cursor: pointer;
            box-shadow: 0 2px 6px rgba(211,47,47,0.35);
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-around;
            padding: 10px 0;
            z-index: 100;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;
            color: #999;
            font-size: 12px;
            flex: 1;
        }
        
        .nav-item.active {
            color: #e53935;
        }

        .nav-icon {
            font-size: 24px;
            margin-bottom: 4px;
        }

        /* 中央签到按钮 */
        .center-btn {
            width: 60px;
            height: 60px;
            background: linear-gradient(to right, #c62828 0%, #e53935 50%, #ef5350 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
            box-shadow: 0 4px 15px rgba(198,40,40,0.45);
            margin-top: -20px;
            border: 3px solid white;
        }
        
        /* 页面内容底部间距 */
        .content {
            padding-bottom: 80px;
        }
        
        /* 调整第一页内容的底部间距 */
        #page1 .white-content {
            padding-bottom: 100px;
        }
        
        /* 社区讨论样式 */
        .community-section {
            margin-bottom: 20px;
        }
        
        .community-item {
            background: white;
            margin: 0 20px 15px 20px;
            border-radius: 12px;
            padding: 15px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
            position: relative;
        }
        
        .community-header {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .community-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #4a9eff;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 16px;
            margin-right: 10px;
        }
        
        .community-user-info {
            flex: 1;
        }
        
        .community-username {
            font-size: 14px;
            font-weight: bold;
            color: #333;
        }
        
        .community-time {
            font-size: 12px;
            color: #999;
        }
        
        .community-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 8px;
        }
        
        .community-content {
            font-size: 14px;
            color: #666;
            line-height: 1.5;
            margin-bottom: 10px;
        }
        
        .community-image {
            width: 100%;
            max-height: 150px;
            object-fit: cover;
            border-radius: 8px;
            margin-bottom: 10px;
        }
        
        .community-stats {
            display: flex;
            align-items: center;
            gap: 15px;
            font-size: 12px;
            color: #999;
        }
        
        .community-stat {
            display: flex;
            align-items: center;
            gap: 3px;
        }
        
        /* 活动方案建议样式 */
        .suggestion-section {
            margin-bottom: 20px;
        }
        
        .suggestion-item {
            background: white;
            margin: 0 20px 15px 20px;
            border-radius: 12px;
            padding: 15px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
            position: relative;
            border-left: 4px solid transparent;
            border-image: linear-gradient(to bottom, #c62828 0%, #e53935 100%) 1;
        }

        .suggestion-header {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .suggestion-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(to right, #b71c1c 0%, #c62828 50%, #e53935 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 16px;
            margin-right: 10px;
            box-shadow: 0 2px 6px rgba(198,40,40,0.3);
        }

        .suggestion-info {
            flex: 1;
        }

        .suggestion-author {
            font-size: 14px;
            font-weight: bold;
            color: #333;
        }

        .suggestion-time {
            font-size: 12px;
            color: #999;
        }

        .suggestion-tag {
            background: linear-gradient(to right, #c62828 0%, #e53935 100%);
            color: white;
            padding: 3px 8px;
            border-radius: 10px;
            font-size: 10px;
            font-weight: bold;
            box-shadow: 0 1px 3px rgba(198,40,40,0.3);
        }
        
        .suggestion-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 8px;
        }
        
        .suggestion-content {
            font-size: 14px;
            color: #666;
            line-height: 1.5;
            margin-bottom: 10px;
        }
        
        .suggestion-actions {
            display: flex;
            align-items: center;
            gap: 15px;
            font-size: 12px;
            color: #999;
        }
        
        .suggestion-action {
            display: flex;
            align-items: center;
            gap: 3px;
            cursor: pointer;
            transition: color 0.3s;
        }
        
        .suggestion-action:hover {
            color: #c62828;
        }
        
        /* 附件图标样式 */
        .suggestion-attachments {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 10px;
        }
        
        .attachment-icon {
            display: flex;
            align-items: center;
            gap: 3px;
            font-size: 12px;
            color: #666;
            background: #f5f5f5;
            padding: 3px 8px;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .attachment-icon:hover {
            background: #e0e0e0;
            color: #333;
        }
        
        .attachment-icon.doc {
            color: #1976d2;
            background: #e3f2fd;
        }
        
        .attachment-icon.image {
            color: #388e3c;
            background: #e8f5e8;
        }
        
        .attachment-icon.pdf {
            color: #d32f2f;
            background: #ffebee;
        }
        
        
        /* 隐藏第二页 */
        #page2 {
            display: none;
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <div class="top-header">
        <div class="logo">
            <span>❤️</span>
            <span>志愿者</span>
        </div>
        <div class="top-search">
            <div class="top-search-box">
                <span class="top-search-icon">🔍</span>
                <input type="text" class="top-search-input" placeholder="搜索一下">
            </div>
        </div>
        <div class="top-right">
            <button class="login-btn">请登录</button>
            <div class="user-avatar">👤</div>
        </div>
    </div>

    <!-- 标签栏 -->
    <div class="tab-bar">
        <a href="#" class="tab-item active">首页</a>
        <a href="venues.html" class="tab-item">实践阵地</a>
        <a href="ranking.html" class="tab-item">志愿数据</a>
        <a href="#" class="tab-item">政策文件</a>
    </div>

    <!-- 横幅区域 -->
    <div class="banner-area">
        <div class="banner-pattern"></div>
        <div class="banner-content">
            <div class="banner-image-container">
                <img src="img/习大大鼓励志愿者.png" alt="习大大鼓励志愿者" class="banner-image active" >
				<img src="img/习近平对社会工作作出重要指示.png" alt="习近平对社会工作作出重要指示" class="banner-image">
                <img src="img/学习贯彻第二十届三中全会精神.png" alt="学习贯彻第二十届三中全会精神" class="banner-image">
				<img src="img/bg.jpg" alt="志愿者" class="banner-image">
                <div class="banner-dots">
                    <span class="banner-dot active" onclick="showBannerImage(0)"></span>
                    <span class="banner-dot" onclick="showBannerImage(1)"></span>
                    <span class="banner-dot" onclick="showBannerImage(2)"></span>
                    <span class="banner-dot" onclick="showBannerImage(3)"></span>
                </div>
            </div>
        </div>
    </div>

    <!-- 通知播报区域 -->
    <div class="notice-broadcast">
        <span class="broadcast-icon">📢</span>
        <div class="broadcast-content">
            <div class="broadcast-text">【最新通知】欢迎参加志愿服务活动！ 北海市贝雕博物馆开放日活动报名中，名额有限，先到先得！ 平安街社区民族团结主题活动即将开始...</div>
        </div>
    </div>

    <!-- 第一页：首页 -->
    <div id="page1" class="content">
        <div class="white-content">
            <!-- 功能网格 -->
            <div class="function-grid">
                <a href="join-practice.html" class="function-item">
                    <div class="function-icon green">👤</div>
                    <div class="function-name">用户注册</div>
                </a>
                <a href="join-team.html" class="function-item">
                    <div class="function-icon orange">👥</div>
                    <div class="function-name">加入团队</div>
                </a>
                <a href="team-register.html" class="function-item">
                    <div class="function-icon">❤️</div>
                    <div class="function-name">团队入驻</div>
                </a>
                <a href="ranking.html" class="function-item">
                    <div class="function-icon">👑</div>
                    <div class="function-name">文明积分</div>
                </a>
                <a href="venues.html" class="function-item">
                    <div class="function-icon yellow">⭐</div>
                    <div class="function-name">阵地预约</div>
                </a>
                <a href="courses.html" class="function-item">
                    <div class="function-icon teal">🎓</div>
                    <div class="function-name">云上课堂</div>
                </a>
                <a href="activities.html" class="function-item">
                    <div class="function-icon blue">🏃</div>
                    <div class="function-name">实践活动</div>
                </a>
            </div>
        
            <!-- 志愿服务卡片 -->
            <div class="service-section">
                <div class="service-header">
                    <span class="service-icon">🤝</span>
                    <span class="service-title">志愿服务</span>
                </div>
                <div class="service-cards">
                    <a href="services.html" class="service-card">
                        <img src="img/853b4aea-acb0-4bcf-b26b-ca285bdafe91.png" alt="幸福黄石港" class="service-card-bg">
                        <div class="service-card-title">幸福黄石港</div>
                    </a>
                    <a href="services.html" class="service-card">
                        <img src="img/87ce05ef-cd7e-4d75-8bff-a44995bfca6a.png" alt="主流西塞" class="service-card-bg">
                        <div class="service-card-title">主流西塞</div>
                    </a>
                    <a href="services.html" class="service-card">
                        <img src="img/a3673c98-7a12-4e07-939d-6112c640e728.png" alt="省善下陆" class="service-card-bg">
                        <div class="service-card-title">省善下陆</div>
                    </a>
                    <a href="services.html" class="service-card">
                        <img src="img/bg.jpg" alt="魅力铁山" class="service-card-bg">
                        <div class="service-card-title">魅力铁山</div>
                    </a>
                </div>
            </div>

            <!-- 大图展示区域 -->
            <div class="big-image-section">
                <a href="#" class="big-image-container">
                    <img src="img/贝雕博物馆.jpg" alt="特色展示" class="big-image">
                </a>
            </div>

            <!-- 活动招募区域 -->
            <div class="activity-recruit-section">
                <div class="recruit-header">
                    <div class="recruit-title">
                        <span class="recruit-icon">📋</span>
                        <span class="recruit-title-text">活动招募</span>
                    </div>
                    <a href="activities.html" class="recruit-more">更多 ></a>
                </div>
                <div class="card-row">
                    <a href="join-practice.html" class="activity-card blue">
                        <div class="card-title">加入文明实践</div>
                        <div class="card-subtitle">师资库</div>
                        <div class="card-action">立即申请</div>
                        <div class="card-icon">👩‍🏫</div>
                    </a>
                    <a href="team-register.html" class="activity-card orange">
                        <div class="card-title">实践团队入驻</div>
                        <div class="card-action">立即入驻</div>
                        <div class="card-icon">🚩</div>
                    </a>
                </div>
            </div>
        
        <!-- 最近活动部分 -->
        <div class="section-title">
            <span>最近活动</span>
            <span class="section-more" onclick="location.href='activities.html'">更多 ></span>
        </div>
        
        <div class="activity-list-item">
            <div class="activity-tag">活动预告</div>
            <div class="activity-image-container">
                <img src="img/贝雕博物馆.jpg" alt="贝雕博物馆开放日" class="activity-image">
            </div>
            <div class="activity-details">
                <div class="activity-main-title">活动预告！北海市贝雕博物馆开放日来了，每月限量开放→速约!（第一期）</div>
                <div class="activity-org">北海市贝雕博物馆</div>
                <div class="activity-info">
                    <span>🕐 2025-11-15~2025-11-15</span>
                    <button class="signup-btn">立即预约</button>
                </div>
            </div>
        </div>
        
        <div class="activity-list-item">
            <div class="activity-tag">民族团结</div>
            <div class="activity-image-container">
                <img src="img/石榴结籽.jpg" alt="石榴结籽粽连心" class="activity-image">
            </div>
            <div class="activity-details">
                <div class="activity-main-title">【站站融通•文明365】石榴结籽粽连心，邻里融乐一家亲——2025年平安街社区民族团结主题活动</div>
                <div class="activity-org">平安街社区新时代文明实践站</div>
                <div class="activity-info">
                    <span>🕐 2025-11-10~2025-11-10</span>
                    <button class="signup-btn">报名参与</button>
                </div>
            </div>
        </div>
        
        <div class="activity-list-item">
            <div class="activity-tag">敬老服务</div>
            <div class="activity-image-container">
                <img src="img/老龄化教育.jpg" alt="知老护老敬老" class="activity-image">
            </div>
            <div class="activity-details">
                <div class="activity-main-title">西藏路社区开展"知老・护老・敬老"老龄化教育暨中医惠老活动</div>
                <div class="activity-org">西藏路社区新时代文明实践站</div>
                <div class="activity-info">
                    <span>🕐 2025-11-08~2025-11-08</span>
                    <button class="signup-btn">了解详情</button>
                </div>
            </div>
        </div>
        
        <!-- 群众活动风采部分 -->
        <div class="section-title">
            <span>群众活动风采</span>
            <span class="section-more" onclick="location.href='community.html'">更多 ></span>
        </div>
        
        <div class="community-section">
            <div class="community-item">
                <div class="community-header">
                    <div class="community-avatar">张</div>
                    <div class="community-user-info">
                        <div class="community-username">张明</div>
                        <div class="community-time">2小时前</div>
                    </div>
                </div>
                <div class="community-title">关于社区环境整治的建议</div>
                <div class="community-content">
                    最近发现小区绿化带有些杂草丛生，建议增加维护频次。另外垃圾分类宣传还需要加强，很多居民对分类标准还不够清楚...
                </div>
                <img src="img/853b4aea-acb0-4bcf-b26b-ca285bdafe91.png" alt="讨论图片" class="community-image">
                <div class="community-stats">
                    <div class="community-stat">
                        <span>👍</span>
                        <span>12</span>
                    </div>
                    <div class="community-stat">
                        <span>💬</span>
                        <span>8</span>
                    </div>
                    <div class="community-stat">
                        <span>👁</span>
                        <span>45</span>
                    </div>
                </div>
            </div>
            
            <div class="community-item">
                <div class="community-header">
                    <div class="community-avatar" style="background: #4caf50;">李</div>
                    <div class="community-user-info">
                        <div class="community-username">李华</div>
                        <div class="community-time">4小时前</div>
                    </div>
                </div>
                <div class="community-title">社区活动建议：邻里互助活动</div>
                <div class="community-content">
                    提议组织一次邻里互助活动，让大家互相认识，增进感情。可以包括技能分享、物品交换等内容。大家觉得怎么样？
                </div>
                <div class="community-stats">
                    <div class="community-stat">
                        <span>👍</span>
                        <span>25</span>
                    </div>
                    <div class="community-stat">
                        <span>💬</span>
                        <span>15</span>
                    </div>
                    <div class="community-stat">
                        <span>👁</span>
                        <span>68</span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 社区活动资源库部分 -->
        <div class="section-title">
            <span>社区活动资源库</span>
            <span class="section-more" onclick="location.href='suggestions.html'">更多 ></span>
        </div>
        
        <div class="suggestion-section">
            <div class="suggestion-item">
                <div class="suggestion-header">
                    <div class="suggestion-icon">💡</div>
                    <div class="suggestion-info">
                        <div class="suggestion-author">王老师</div>
                        <div class="suggestion-time">1小时前</div>
                    </div>
                    <span class="suggestion-tag">热门建议</span>
                </div>
                <div class="suggestion-title">社区文化节活动方案</div>
                <div class="suggestion-content">
                    建议举办一场为期三天的社区文化节，包括传统文化展示、手工艺制作体验、社区才艺表演等环节。可以邀请社区老人分享传统技艺，增进不同年龄段居民的交流...
                </div>
                <div class="suggestion-attachments">
                    <div class="attachment-icon doc" onclick="viewAttachment('doc1')">
                        <span>📄</span>
                        <span>活动策划书.docx</span>
                    </div>
                    <div class="attachment-icon pdf" onclick="viewAttachment('pdf1')">
                        <span>📋</span>
                        <span>预算清单.pdf</span>
                    </div>
                    <div class="attachment-icon image" onclick="viewAttachment('img1')">
                        <span>🖼️</span>
                        <span>效果图.jpg</span>
                    </div>
                </div>
                <div class="suggestion-actions">
                    <div class="suggestion-action">
                        <span>👍</span>
                        <span>32</span>
                    </div>
                    <div class="suggestion-action">
                        <span>💬</span>
                        <span>18</span>
                    </div>
                    <div class="suggestion-action">
                        <span>📋</span>
                        <span>已采纳</span>
                    </div>
                </div>
            </div>
            
            <div class="suggestion-item">
                <div class="suggestion-header">
                    <div class="suggestion-icon">🌱</div>
                    <div class="suggestion-info">
                        <div class="suggestion-author">绿色志愿者小组</div>
                        <div class="suggestion-time">3小时前</div>
                    </div>
                    <span class="suggestion-tag">环保主题</span>
                </div>
                <div class="suggestion-title">社区绿化美化行动</div>
                <div class="suggestion-content">
                    提议组织"美丽家园共建"活动，包括垃圾分类宣传、绿植种植、环保知识讲座等。让居民参与到社区环境改善中来，培养环保意识...
                </div>
                <div class="suggestion-attachments">
                    <div class="attachment-icon doc" onclick="viewAttachment('doc2')">
                        <span>📄</span>
                        <span>实施方案.docx</span>
                    </div>
                    <div class="attachment-icon image" onclick="viewAttachment('img2')">
                        <span>🖼️</span>
                        <span>绿化设计图.png</span>
                    </div>
                </div>
                <div class="suggestion-actions">
                    <div class="suggestion-action">
                        <span>👍</span>
                        <span>28</span>
                    </div>
                    <div class="suggestion-action">
                        <span>💬</span>
                        <span>12</span>
                    </div>
                    <div class="suggestion-action">
                        <span>⏰</span>
                        <span>待审核</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 志愿大数据区域 -->
        <div class="data-stats-section">
            <div class="stats-header">
                <div class="stats-title">
                    <span class="stats-icon">📊</span>
                    <span class="stats-title-text">站站融通大数据</span>
                </div>
                <div class="stats-update-time">更新时间：每天0点0分</div>
            </div>
            <div class="stats-grid">
                <div class="stats-item">
                    <div class="stats-number">220190</div>
                    <div class="stats-label">注册志愿者人数</div>
                </div>
                <div class="stats-item">
                    <div class="stats-number">71883</div>
                    <div class="stats-label">志愿服务活动开展数</div>
                </div>
                <div class="stats-item">
                    <div class="stats-number">24</div>
                    <div class="stats-label">今日新增志愿者数</div>
                </div>
                <div class="stats-item">
                    <div class="stats-number">1630</div>
                    <div class="stats-label">志愿组织注册数</div>
                </div>
                <div class="stats-item">
                    <div class="stats-number">3574557</div>
                    <div class="stats-label">组织累计志愿服务时长</div>
                </div>
                <div class="stats-item">
                    <div class="stats-number">117</div>
                    <div class="stats-label">今日新增活动数</div>
                </div>
            </div>
        </div>

        <!-- 志愿精神横幅 -->
        <div class="volunteer-spirit-section">
            <div class="spirit-banner">
                <div class="spirit-title">志愿精神</div>
                <div class="spirit-values">
                    <div class="spirit-value">奉献</div>
                    <div class="spirit-value">友爱</div>
                    <div class="spirit-value">互助</div>
                    <div class="spirit-value">进步</div>
                </div>
            </div>
        </div>
        </div>
    </div>

    <!-- 第二页：推荐活动 -->
    <div id="page2" class="content">
        <div class="status-bar">
            <div class="top-actions" style="margin-left: auto;">
                <button>⋯</button>
                <button>—</button>
                <button>⭕</button>
            </div>
        </div>
        
        <div class="activity-cards">
            <div class="card-row">
                <a href="#" class="activity-card blue">
                    <div class="card-title">加入文明实践</div>
                    <div class="card-subtitle">师资库</div>
                    <div class="card-action">立即申请</div>
                    <div class="card-icon">👩‍🏫</div>
                </a>
                <a href="#" class="activity-card orange">
                    <div class="card-title">实践团队入驻</div>
                    <div class="card-action">立即入驻</div>
                    <div class="card-icon">🚩</div>
                </a>
            </div>
            <div class="card-row">
                <a href="#" class="activity-card orange">
                    <div class="card-title">加入文明实践团队</div>
                    <div class="card-action">立即加入</div>
                    <div class="card-icon">👥</div>
                </a>
                <a href="#" class="activity-card yellow">
                    <div class="card-title">星级阵地</div>
                    <div class="card-icon">⭐</div>
                </a>
            </div>
            <div class="card-row">
                <a href="#" class="activity-card blue" style="background: #fce4ec;">
                    <div class="card-title">优质教学点</div>
                    <div class="card-icon">🏫</div>
                </a>
            </div>
        </div>
        
        <div class="section-title">
            <span>最近活动</span>
            <span class="section-more">更多 ></span>
        </div>
        
        <div class="activity-list-item">
            <div class="activity-tag">活动招募</div>
            <div class="activity-header">
                <div class="activity-main-title">"存正心、守正道、养正气"--践行新风正...</div>
            </div>
            <div class="activity-details">
                <div class="activity-org">海沧区东孚街道实践所</div>
                <div class="activity-rating">⭐⭐⭐⭐⭐</div>
                <div class="activity-info">
                    <span>报名对象：不限 | 0/30人</span>
                    <span>🕐 2025-10-14~2025-10-14</span>
                    <button class="signup-btn">报名</button>
                </div>
                <div class="activity-info">
                    <span>福建省厦门市海沧区东孚大道19... | <span class="activity-distance">1002.0km</span></span>
                </div>
            </div>
        </div>
        
        <div class="activity-list-item">
            <div class="activity-tag">活动招募</div>
            <div class="activity-header">
                <div class="activity-main-title">我们的节日·重阳——情暖重阳，爱在社区</div>
            </div>
            <div class="activity-details">
                <div class="activity-org">海沧区东孚街道东埔社区实践...</div>
                <div class="activity-rating">⭐⭐⭐⭐⭐</div>
                <div class="activity-info">
                    <span>报名对象：不限 | 0/50人</span>
                    <span>🕐 2025-10-14~2025-10-14</span>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="nav-item active" onclick="showPage(1)">
            <span class="nav-icon">🏠</span>
            <span>首页</span>
        </a>
        <a href="checkin.html" class="nav-item">
            <span class="center-btn">👆</span>
            <span>签到</span>
        </a>
        <a href="profile.html" class="nav-item">
            <span class="nav-icon">👤</span>
            <span>我的</span>
        </a>
    </div>
    
    <script>
        // 轮播图功能
        let currentBannerIndex = 0;
        const bannerImages = document.querySelectorAll('.banner-image');
        const bannerDots = document.querySelectorAll('.banner-dot');
        let bannerInterval;

        function showBannerImage(index) {
            // 移除所有active类
            bannerImages.forEach(img => img.classList.remove('active'));
            bannerDots.forEach(dot => dot.classList.remove('active'));

            // 添加active类到指定索引
            bannerImages[index].classList.add('active');
            bannerDots[index].classList.add('active');
            currentBannerIndex = index;
        }

        function nextBannerImage() {
            currentBannerIndex = (currentBannerIndex + 1) % bannerImages.length;
            showBannerImage(currentBannerIndex);
        }

        // 自动轮播，每3秒切换一次
        function startBannerCarousel() {
            bannerInterval = setInterval(nextBannerImage, 3000);
        }

        function stopBannerCarousel() {
            clearInterval(bannerInterval);
        }

        // 页面加载时启动轮播
        window.addEventListener('load', () => {
            startBannerCarousel();

            // 鼠标悬停时暂停轮播
            const bannerArea = document.querySelector('.banner-area');
            bannerArea.addEventListener('mouseenter', stopBannerCarousel);
            bannerArea.addEventListener('mouseleave', startBannerCarousel);
        });

        // 页面切换功能
        function showPage(pageNum) {
            document.getElementById('page1').style.display = pageNum === 1 ? 'block' : 'none';
            document.getElementById('page2').style.display = pageNum === 2 ? 'block' : 'none';

            // 更新导航栏激活状态
            const navItems = document.querySelectorAll('.nav-item');
            navItems.forEach((item, index) => {
                if (pageNum === 1 && index === 0) {
                    item.classList.add('active');
                } else if (pageNum === 2 && index === 1) {
                    item.classList.add('active');
                } else if (index !== 1) {
                    item.classList.remove('active');
                }
            });
        }
        
        // 查看附件
        function viewAttachment(attachmentId) {
            const attachments = {
                'doc1': '活动策划书.docx - 详细的文化节活动策划文档',
                'pdf1': '预算清单.pdf - 活动预算明细表',
                'img1': '效果图.jpg - 文化节现场布置效果图',
                'doc2': '实施方案.docx - 绿化美化行动实施计划',
                'img2': '绿化设计图.png - 社区绿化布局设计图'
            };
            
            const attachmentInfo = attachments[attachmentId] || '附件详情';
            alert('📎 查看附件\n\n' + attachmentInfo + '\n\n功能开发中...');
        }
        
    </script>
</body>
</html>